<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生注册表表单</title>
	</head>
	<body>
		<form onsubmit="form_check(event)">
			<label for="username">姓名：</label>
			<br>
			<input id="username" name="username" placeholder="请输入你的姓名">
			<br>
			<label for="number">手机号：</label>
			<br>
			<input id="number" name="number" placeholder="请输入11位手机号">
			<br>
			<label for="email">Email:</label>
			<br>
			<input id="email" name="email" placeholder="可选,如:student@school.com">
			<br>
			<label for="password">密码：</label>
			<br>
			<input type="password" id="password" name="password" placeholder="至少6位包含数字与字母">
			<br>
			<label for="password2">确认密码：</label>
			<br>
			<input type="password" id="password2" name="password2" placeholder="请再次输入密码">
			<br>
			<input type="submit">
		</form>
	<script>
		function form_check(event){
		    event.preventDefault();
		
		    let username = document.getElementById("username");
		    let regUsername = /^[a-zA-Z0-9\u4e00-\u9fa5]{3,8}$/;
		    if(!regUsername.test(username.value)){ // 空值或格式错误都会进入
		        alert("请输入3-8位中文/字母/数字作为用户名（不能为空）");
		        return false;
		    }
		
		    let number = document.getElementById("number");
		    let regNumber = /^[0-9]{11}$/;
		    if(!regNumber.test(number.value)){
		        alert("请输入11位数字作为手机号（不能为空）");
		        return false;
		    }
		
		    let email = document.getElementById("email");
		    let regEmail = /^[A-Za-z0-9_]+@[A-Za-z0-9]+\.(com|cn|gov.cn|org)$/;
		    if(email.value.trim() !== "" && !regEmail.test(email.value)){ // 非空才校验
		        alert("请输入正确的邮箱格式");
		        return false;
		    }
		
		    let password = document.getElementById("password");
		    let regPassword = /^[A-Za-z0-9]{6,}$/;
		    if(!regPassword.test(password.value)){
		        alert("请输入至少6位数字与字母组成的密码（不能为空）");
		        return false;
		    }
		
		    let password2 = document.getElementById("password2");
		    if (password2.value !== password.value) {
		        alert("两次输入密码不一致");
		        return false; 
		    } else {
		        alert("注册成功");
		        return true;
		    }
		}
	</script>
	</body>
</html>